<template>
  <div class="add-address">
    <Hader :title="title" :isLeft="true" />
    <FormInput name="联系人" placeholder="姓名" v-model="addressInfo.name" :sale="true" />
    <TabTag :tag="sale" @checkTag="saleChecked" :selectTag="sex" />
    <FormInput name="电话" placeholder="手机号" v-model="addressInfo.phone" />
    <div @click="addressTo">
      <FormInput name="地址" placeholder="小区/写字楼/学校等" icon="iconfont icon-youjiantou" :value="address" :istextarea="true" />
    </div>
    <FormInput name="门牌号" placeholder="10号楼5层501室222" icon="iconfont icon-bianji1" :istextarea="true" v-model="addressInfo.bottom" />
    <TabTag :tag="tag" name="标签" @checkTag="tagChecked" :selectTag="tags" />
    <div class="ok" @click="addAddress()">确定</div>
  </div>
</template>
<script>
import Hader from "../components/Myheder.vue";
import FormInput from '../components/orders/Form.vue'
import TabTag from '../components/orders/TabTag.vue'
import { Toast } from "mint-ui";
export default {
  name: 'addAddress',
  data () {
    return {
      address: this.$route.params.address,
      sale: ['先生', '女士',],
      tag: ['家', '公司', '学校',],
      addressInfo: {
        address: this.$route.params.address,
      },
      title: '添加地址',
      sex: '',
      tags: ''

    }
  },
  created () {
    let address = JSON.parse(localStorage.getItem('address'))
    const tempAddress = { address: this.$route.params.address }
    this.addressInfo = { ...address, ...tempAddress }
    this.addressInfo = this.addressInfo
    console.log( ' this.addressInfo',this.addressInfo);
    this.sex = this.addressInfo.sex
    this.tags = this.addressInfo.tag
    const editInfo = this.$route.params
    if (editInfo.name) {
      console.log('编辑地址');
      this.title = '编辑地址'
    } else {
      console.log('编辑地址');
      this.title = '新增地址'
    }


  },
  watch: {

  },
  computed: {
  },
  methods: {
    saleChecked (item) {
      this.addressInfo.sex = item
      this.sex = JSON.parse(JSON.stringify(item))
      console.log(this.sex);
    },
    tagChecked (item) {
      this.addressInfo.tag = item
      this.tags = item
    },
    // 跳转到选择地址
    addressTo () {
      console.log(this.addressInfo);
      localStorage.setItem('address', JSON.stringify(this.addressInfo))
      this.$router.push({ path: './Address', query: { address: this.$route.params.address, isAdd: true } })
    },
    addAddress () {
      console.log(this.addressInfo);
      // console.log(this.addressInfo);
      if (!this.addressInfo.name) {
        this.showMsg("请输入联系人");
        return;
      }

      if (!this.addressInfo.phone) {
        this.showMsg("请输入手机号");
        return;
      }

      if (!this.addressInfo.address) {
        this.showMsg("请输入收货地址");
        return;
      }
      localStorage.removeItem('address')
      if (this.title == '添加地址') {
        this.add()
        return;
      } else {
        this.editAddress()
        return
      }

    },
    add () {
      const userid = localStorage.getItem('userId')
      this.$axios.post(`/api/user/add_address/${userid}`, this.addressInfo).then(res => {
        this.$router.push('myAddress')
      })
    },
    editAddress () {
      const userid = localStorage.getItem('userId')
      this.$axios.post(`/api/user/edit_address/${userid}/${this.addressInfo._id}`, this.addressInfo).then(res => {
        this.$router.push("/myAddress");
      });
    },

    showMsg (msg) {
      Toast({
        message: msg,
        duration: 2000
      });
    },
  },
  components: {
    Hader,
    FormInput,
    TabTag
  }
}
</script>
<style  scoped>
.add-address {
  background-color: #fff;
  height: 100vh;
}
.ok {
  height: 1.2rem;
  width: 90vw;
  line-height: 1.2rem;
  text-align: center;
  background-color: #02d156;
  border-radius: 0.1rem;
  margin: 0 0.5rem;
  color: #fff;
}
</style>
